<div style="display: flex; justify-content: space-between;">
  <nz-input-group nzAddOnBefore="処理ID" nzSize="large" style="margin-top: 10px;width:450px">
    <input nz-input placeholder="処理ID" nzSize="large" style="width: 200px;" [(ngModel)]="screenId"/>
  </nz-input-group>
  <nz-input-group nzAddOnBefore="クラス名（論理）" nzSize="large" style="margin-top: 10px;">
    <input nz-input placeholder="クラス名（論理）" nzSize="large" style="width: 200px;" [(ngModel)]="classId"/>
  </nz-input-group>
  <div class="margin-top-10">
    <button nz-button [nzType]="'primary'" (click)="doSearch()">検索</button>
  </div>
</div>
<hr />

<nz-input-group nzAddOnBefore="パッケージ名　　　" nzSize="large"  style="margin-top: 10px;">
  <input nz-input placeholder="パッケージ名" nzSize="large" style="width: 600px;" [(ngModel)]="outputdesignclassInfo.fieldPackageNmTemp"/>
</nz-input-group>
<nz-input-group nzAddOnBefore="クラス名（物理）　" nzSize="large"  style="margin-top: 10px;">
  <input nz-input placeholder="クラス名（物理）　" nzSize="large" style="width: 600px;" [(ngModel)]="outputdesignclassInfo.fieldClassPhysicsNmTemp"/>
</nz-input-group>
<nz-input-group nzAddOnBefore="アノテーション　　" nzSize="large" style="margin-top: 10px;">
  <input nz-input placeholder="@" nzSize="large" style="width: 600px;" [(ngModel)]="outputdesignclassInfo.fieldAnnotationTemp"/>
</nz-input-group>
<nz-input-group nzAddOnBefore="継承クラス　　　　" nzSize="large" style="margin-top: 10px;">
  <input nz-input placeholder="class" nzSize="large" style="width: 600px;" [(ngModel)]="outputdesignclassInfo.fieldImplClassNmTemp"/>
</nz-input-group>
<nz-input-group nzAddOnBefore="実装インタフェース" nzSize="large" style="margin-top: 10px;">
  <input nz-input placeholder="interface" nzSize="large" style="width: 600px;" [(ngModel)]="outputdesignclassInfo.fieldInterfaceTemp"/>
</nz-input-group>
<nz-input-group nzAddOnBefore="クラス概要　　　　" nzSize="large" style="margin-top: 10px;">
  <input nz-input placeholder="クラス概要　　　　" nzSize="large" style="width: 600px;" [(ngModel)]="outputdesignclassInfo.fieldClassInfoTemp"/>
</nz-input-group>
<nz-input-group nzAddOnBefore="備考　　　　　　　" nzSize="large" style="margin-top: 10px;">
  <input nz-input placeholder="備考　　　　　　　" nzSize="large" style="width: 600px;" [(ngModel)]="outputdesignclassInfo.fieldTopRemarksTemp"/>
</nz-input-group>
<hr />

<nz-input-group nzAddOnBefore="フィールド定義" nzSize="large" style="margin-top: 10px;">
  <input nz-input placeholder="フィールド定義" nzSize="large" style="width: 600px;" [(ngModel)]="outputdesignclassInfo.fieldDefinitionTemp"/>
</nz-input-group>
<nz-input-group nzAddOnBefore="フィールド概要" nzSize="large" style="margin-top: 10px;">
  <input nz-input placeholder="フィールド概要" nzSize="large" style="width: 600px;" [(ngModel)]="outputdesignclassInfo.fieldSummaryTemp"/>
</nz-input-group>

<div style="display: flex; justify-content: space-between;">
  <nz-input-group nzAddOnBefore="備考　　　　　" nzSize="large" style="margin-top: 10px;">
    <input nz-input placeholder="備考" nzSize="large" style="width: 600px;" [(ngModel)]="outputdesignclassInfo.fieldmiddleRemarksTemp"/>
  </nz-input-group>
  <div style="margin-top: 10px;">
      <button nz-button [nzType]="'primary'"  ng-disabled="!(outputdesignclassInfo.fieldSummaryTemp)" (click)="addfield()">作成</button>
  </div>
</div>

<div class="form-group" style="margin-top: 10px;">
  <nz-table nzBordered>
    <thead>
      <tr class="info">
        <th>フィールド定義</th>
        <th>フィールド概要</th>
        <th>備考</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let item of outputdesignclassInfo.fieldList;index as i">
        <tr>
          <td style="width: 30%;">
            <pre>{{item.fieldDefinition}}</pre>
          </td>
          <td style="width: 30%;">
            <pre>{{item.fieldSummary}}</pre>
          </td>
          <td style="width: 30%;">
            <pre>{{item.fieldmiddleRemarks}}</pre>
          </td>
          <td style="width: 10%;">
            <button nz-button [nzType]="'primary'" (click)="delBtn(i)">削除</button>
          </td>
        </tr>
      </ng-container>
    </tbody>
  </nz-table>
</div>
<hr />

<nz-input-group nzAddOnBefore="メソッド定義　" nzSize="large" style="margin-top: 10px;">
  <input nz-input placeholder="メソッド定義" nzSize="large" style="width: 600px;" [(ngModel)]="outputdesignclassInfo.methodDefinitionTemp"/>
</nz-input-group>
<nz-input-group nzAddOnBefore="メソッド概要　" nzSize="large" style="margin-top: 10px;">
  <input nz-input placeholder="メソッド概要" nzSize="large" style="width: 600px;" [(ngModel)]="outputdesignclassInfo.methodSummaryTemp"/>
</nz-input-group>

<div style="display: flex; justify-content: space-between;">
  <nz-input-group nzAddOnBefore="備考　　　　　" nzSize="large" style="margin-top: 10px;">
    <input nz-input placeholder="備考" nzSize="large" style="width: 600px;" [(ngModel)]="outputdesignclassInfo.footRemarksTemp"/>
  </nz-input-group>
  <div style="margin-top: 10px;">
    <button nz-button [nzType]="'primary'" (click)="addMethod()" ng-disabled="!(outputdesignclassInfo.methodSummaryTemp)">作成</button>
  </div>
</div>



<div class="form-group" style="margin-top: 10px;">
  
    <nz-table nzBordered>
    <thead>
      <tr class="info">
        <th>メソッド定義</th>
        <th>メソッド概要</th>
        <th>備考</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let item of outputdesignclassInfo.methodList;index as j">
        <tr>
          <td style="width: 30%;">
            <pre>{{item.methodDefinition}}</pre>
          </td>
          <td style="width: 30%;">
            <pre>{{item.methodSummary}}</pre>
          </td>
          <td style="width: 30%;">
            <pre>{{item.footRemarks}}</pre>
          </td>
          <td style="width: 10%;">
            <button nz-button [nzType]="'primary'" (click)="delMethodBtn(j)">削除</button>
          </td>
        </tr>
      </ng-container>
    </tbody>
  </nz-table>
</div>
<hr />
<div style="display: flex; justify-content: space-between;">
  <div style="margin-top: 10px;">
    <button nz-button [nzType]="'primary'" (click)="onDownload()" hidden="hidden">ダウンロード</button>
  </div>
  <div style="margin-top: 10px;">
    <button nz-button [nzType]="'primary'" (click)="onRegister()" >仕様書作成</button>
  </div>
</div>
